import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View, Image,
    TouchableOpacity, FlatList,
} from 'react-native';

const shareData = [
    {icon: 'http://upload.neusoft.edu.cn/2020/0407/1586244076564.jpg', title: '111'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0324/1585019625596.jpg', title: '222'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0225/1582596302804.jpg', title: '333'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0407/1586244076564.jpg', title: '111'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0324/1585019625596.jpg', title: '222'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0225/1582596302804.jpg', title: '333'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0407/1586244076564.jpg', title: '111'},
    {icon: 'http://upload.neusoft.edu.cn/2020/0324/1585019625596.jpg', title: '222'},
];
export default class IrishChainMiddleItem extends Component {
    render() {
        return (
            <View>
                <FlatList
                    //加载数据源
                    data={shareData}
                    //展示数据
                    renderItem={({index, item}) => this.showCell(index, item)}
                    //默认情况下每行都需要提供一个不重复的key属性
                    keyExtractor={(item, index) => (index)}
                    //设置垂直布局
                    horizontal={false}
                    //设置水平的排列的个数（只有垂直布局才起作用）
                    numColumns={4}
                />
            </View>
        );
    }

    showCell(index, item) {
        return (
            //添加手势
            <View>
                <TouchableOpacity activeOpacity={0.5} onPress={() => {
                    alert('第' + index + '个');
                }}>
                    <View style={styles.cellViewStyle}>
                        <Image source={{uri: item.icon}}
                               style={{width: 80, height: 80}}/>
                        <Text>{item.title}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    cellViewStyle: {
        width: 78,
        height: 100,
        marginLeft: 20,
        marginTop: 20,
        alignItems: 'center',
    },
});
//输出组件类
module.exports = IrishChainMiddleItem;
